<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
  </ul>
  <input type="button" value="按钮" id="btn" />
  <script>
    // 利用事件委托（事件冒泡），给新创建的元素也注册上事件
    var ul = document.getElementById('ul');

    // 单击按钮，添加一个新的li
    var btn = document.getElementById('btn');
    btn.onclick = function () {//按钮点击时,创建一个li,并赋值,放在ul的子元素最前面

      var li = document.createElement('li');
      li.innerHTML = 'fdf';
      ul.insertBefore(li, ul.children[0]);

    }
  </script>
</body>

</html>